<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
//控制注册与登录表单的显示， 默认显示注册
// const isRegister = ref(false)
//定义绑定参数数据
const registerDate = ref({
    username: '',
    password: '',
    rePassword: ''
})
import { userRegisterService, userLoginService } from '@/api/user.js'
//调用封装到api的功能接口函数
const register = async () => {
    let result = await userRegisterService(registerDate.value);
    ElMessage.success('注册成功！')
    clear();
}
// 将创建好的路由导入使用来进行页面跳转
import { useRouter } from 'vue-router';
const router = useRouter();
// 创建用来存储token的pinia库
import { useTokenStore } from '@/stores/token.js';
const tokenSrore = useTokenStore()
// 登录事件
const login = async () => {
    let result = await userLoginService(registerDate.value);
    // 在登录成功拿到token后将该token存进pinia库中
    console.log("token:" + result.data);
    tokenSrore.setToken(result.data)
    // 在这我们只要做操作成功的反馈即可，对于操作失败的反馈我们统一交给响应拦截器去处理
    // 在登录成功之后跳转到主页面
    router.push('/')
    ElMessage.success('登录成功！')
}

// 将输入数据进行清空
const clear = () => {
    registerDate.value = {
        username: '',
        password: '',
        rePassword: ''
    }
}
</script>

<template>
    <div class="back">
        <div class="section">
            <div class="container">
                <div class="row full-height justify-content-center">
                    <div class="col-12 text-center align-self-center py-5">
                        <div class="section pb-5 pt-5 pt-sm-2 text-center">
                            <h6 class="mb-0 pb-3"><span>登录</span><span>注册</span></h6>
                            <input class="checkbox" type="checkbox" id="reg-log" name="reg-log" />
                            <label for="reg-log"></label>
                            <div class="card-3d-wrap mx-auto">
                                <div class="card-3d-wrapper">
                                    <div class="card-front">
                                        <div class="center-wrap">
                                            <div class="section text-center">
                                                <h4 class="mb-4 pb-3">登录</h4>
                                                <div class="form-group">
                                                    <input type="text" name="username" class="form-style"
                                                        v-model="registerDate.username" :prefix-icon="User"
                                                        placeholder="账号" id="username" autocomplete="off">
                                                    <i class="input-icon uil uil-user"></i>
                                                </div>
                                                <div class="form-group mt-2">
                                                    <input type="password" name="password" class="form-style"
                                                        v-model="registerDate.password" :prefix-icon="Lock"
                                                        placeholder="密码" id="password" autocomplete="off">
                                                    <i class="input-icon uil uil-lock-alt"></i>
                                                </div>
                                                <a href="#" class="btn mt-4" @click="login">提交</a>
                                                <p class="mb-0 mt-4 text-center">
                                                    <a href="#0" class="link">忘记了密码？</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-back">
                                        <div class="center-wrap">
                                            <div class="section text-center">
                                                <h4 class="mb-4 pb-3">注册</h4>
                                                <div class="form-group">
                                                    <input type="text" name="username" class="form-style"
                                                        v-model="registerDate.username" :prefix-icon="User"
                                                        placeholder="账号" id="username" autocomplete="off">
                                                    <i class="input-icon uil uil-user"></i>
                                                </div>
                                                <div class="form-group mt-2">
                                                    <input type="text" name="password" class="form-style"
                                                        v-model="registerDate.password" :prefix-icon="Lock"
                                                        placeholder="密码" id="password" autocomplete="off">
                                                    <i class="input-icon uil uil-lock-alt"></i>
                                                </div>
                                                <div class="form-group mt-2">
                                                    <input type="text" name="rePassword" class="form-style"
                                                        v-model="registerDate.rePassword" :prefix-icon="Lock"
                                                        placeholder="再次输入密码" id="rePassword" autocomplete="off">
                                                    <i class="input-icon uil uil-lock-alt"></i>
                                                </div>
                                                <a href="#" class="btn mt-4" @click="register">提交</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css');
@import url('https://unicons.iconscout.com/release/v2.1.9/css/unicons.css');
@import url('@/assets/style.css');
</style>